<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#first{
			width: 300px;
			height: 300px;
			margin:0 auto;
			margin-top: 50px;
		}
		#someDiv{
			width: 100px;
			height: 100px;
			background: green;
			opacity: 1;
		}
		.btns{
			margin:0 auto;
			position: absolute;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<div id="first">
		<div id="someDiv"></div>
		<p></p>
		<div class="btns">
			<button onclick="js:valid = false">停止</button>
			<button onclick="js:valid = true;recolor()">继续</button>
		</div>
		<script>
			var div = document.getElementById("someDiv")
			var valid = true
			function recolor(){
				var opacity = 1
				var fade = setInterval(function(){
					opacity -=0.05
					div.style.opacity = opacity
					if(opacity <= 0 ){ 
						clearInterval(fade);
						if(valid) recolor()
					}
				},60)
			}
			recolor()
		</script>
	</div>
</body>
</html>